<template>
  <BasicModal
    :canFullscreen="false"
    @cancel="handleCancel"
    v-bind="$attrs"
    @register="registerModal"
    :title="title"
    width="50%"
  >
    <div class="container">
      <BasicForm @register="registerForm" />
    </div>
    <template #footer>
      <a-button @click="handleCancel">关闭</a-button>
      <a-button type="primary" @click="handleSubmit">保存</a-button>
    </template>
  </BasicModal>
</template>
<script lang="ts" setup name="EditModal">
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { matchingSchemas } from './matching.data';
  import { getFormModelFields } from '/@/api/config-center/bpmn-process';
  import modelerStore from '/@/store/modules/bpmnModeler';
  const modeler = modelerStore();

  const emit = defineEmits(['success', 'register']);
  // const props = defineProps({
  //   code: String,
  // });

  const { createMessage } = useMessage();
  const title = ref('');
  const isEdit = ref(false);
  let oldData = {};
  const [registerModal, { closeModal }] = useModalInner(async (data) => {
    if (data.prop) {
      title.value = '编辑';
    } else {
      title.value = '新增';
    }
    oldData = data;
    isEdit.value = data.isEdit;

    const defaultArr = [
      {
        label: 'WorkItemID',
        value: 'WorkItemID',
      },
      {
        label: 'WIEntryID',
        value: 'WIEntryID',
      },
      {
        label: 'WEID',
        value: 'WEID',
      },
      {
        label: 'WorkItemID-EntryID',
        value: 'WorkItemID-EntryID',
      },
    ];
    const resProps = modeler.configuration?.props?.map((i) => ({
      label: i.propName,
      value: i.propName,
    }));
    const resRoles = modeler.configuration?.roles?.map((i) => ({
      label: i.roleName,
      value: i.roleName,
    }));
    let fieldList = [];
    console.log(data.code);
    if (data.code) {
      const res = await getFormModelFields(data.code);
      fieldList = res.map((i) => ({ label: i, value: i }));
    }
    removeSchemaByField(['prop', 'field']);
    appendSchemaByField(
      [
        {
          field: 'field',
          component: 'Select',
          label: `匹配字段`,
          required: true,
          colProps: {
            span: 12,
          },
          componentProps: {
            options: fieldList,
          },
        },
        {
          field: 'prop',
          component: 'Select',
          label: `匹配属性`,
          required: true,
          colProps: {
            span: 12,
          },
          componentProps: {
            options: [...defaultArr, ...resProps, ...resRoles],
          },
        },
      ],
      '',
      true,
    );

    setFieldsValue(data);
  });

  import { BasicForm, useForm } from '/@/components/Form/index';

  const [
    registerForm,
    {
      validate,
      resetFields,
      setFieldsValue,
      removeSchemaByField,
      appendSchemaByField,
      // updateSchema,
    },
  ] = useForm({
    labelWidth: 80,
    schemas: matchingSchemas,
    showActionButtonGroup: false,
  });
  async function handleSubmit() {
    const values = await validate();
    const params = Object.assign(oldData, values);
    createMessage.success('操作成功');
    emit('success', params, isEdit.value);
    handleCancel();
  }
  function handleCancel() {
    resetFields();
    closeModal();
  }
</script>
<style lang="less" scoped></style>
